<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI技术应用 - NoteX</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .ai-feature-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
        }
        .ai-feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .tech-diagram {
            background: linear-gradient(135deg, #f5f7fa 0%, #e0e7ff 100%);
            border-radius: 12px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-12">
        <div class="text-center mb-16">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">NoteX AI技术应用</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                基于大模型技术的智能笔记应用，为您提供更高效的笔记体验
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div class="ai-feature-card bg-white p-8 shadow-md">
                <div class="flex items-center mb-6">
                    <div class="bg-green-100 p-3 rounded-full mr-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-semibold text-gray-800">智能笔记生成</h3>
                </div>
                <p class="text-gray-600 mb-6">
                    基于GPT-4大模型技术，根据您的输入自动生成结构清晰、内容丰富的笔记。只需提供关键词或简单描述，AI即可为您扩展成完整的笔记内容。
                </p>
                <div class="tech-diagram p-4 mb-6">
                    <div class="text-center py-8">
                        <div class="inline-block bg-white p-4 rounded-lg shadow-sm mb-4">
                            用户输入 → AI处理 → 生成笔记
                        </div>
                        <p class="text-sm text-gray-500">AI笔记生成流程</p>
                    </div>
                </div>
            </div>

            <div class="ai-feature-card bg-white p-8 shadow-md">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-full mr-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 6h3M11.21 15.83l1.42 1.43a1 1 0 001.414 0l3.58-3.59a1 1 0 00-1.414-1.414l-2.873 2.873-.707-.707a1 1 0 00-1.414 0l-1.586 1.586a1 1 0 000 1.414z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-semibold text-gray-800">智能摘要与翻译</h3>
                </div>
                <p class="text-gray-600 mb-6">
                    自动分析长文本内容，提取关键信息生成简洁摘要。支持多语言实时翻译，打破语言障碍，让您的笔记全球通用。
                </p>
                <div class="tech-diagram p-4 mb-6">
                    <div class="text-center py-8">
                        <div class="inline-block bg-white p-4 rounded-lg shadow-sm mb-4">
                            原文 → AI分析 → 摘要/翻译
                        </div>
                        <p class="text-sm text-gray-500">摘要与翻译流程</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-16">
            <div class="md:flex">
                <div class="md:flex-1 p-8">
                    <h2 class="text-3xl font-bold text-gray-800 mb-4">技术架构</h2>
                    <p class="text-gray-600 mb-6">
                        NoteX采用前沿的大模型技术栈，结合本地处理与云端AI服务，在保护用户隐私的同时提供强大的智能功能。
                    </p>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <svg class="flex-shrink-0 w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span class="text-gray-700">基于Transformer架构的大语言模型</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="flex-shrink-0 w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span class="text-gray-700">RESTful API接口与前端交互</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="flex-shrink-0 w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span class="text-gray-700">本地缓存与隐私保护机制</span>
                        </li>
                    </ul>
                </div>
                <div class="md:flex-1 bg-gray-50 p-8 flex items-center justify-center">
                    <div class="w-full max-w-md">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="text-center font-medium text-gray-700 mb-4">AI处理流程</div>
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-4">1</div>
                                    <div class="text-gray-700">用户输入笔记内容</div>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-4">2</div>
                                    <div class="text-gray-700">内容发送至AI处理引擎</div>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-4">3</div>
                                    <div class="text-gray-700">大模型分析处理内容</div>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-4">4</div>
                                    <div class="text-gray-700">返回智能处理结果</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center">
            <a href="/home" class="inline-block px-6 py-3 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition duration-300">
                返回应用
            </a>
        </div>
    </div>
</body>
</html>
